<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Column graph for tickets' sold seats group by Event</title>
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/document.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/claroEnhancedGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />
<link rel="stylesheet" type="text/css" href="msg.css" />

	<script type="text/javascript">
		function createColumnChart(eventSel, criteriaSel) {
			var columnChart = new dojox.charting.Chart2D("columnChart1");
        	// Set the theme
        	columnChart.setTheme(dojox.charting.themes.MiamiNice);
        	// Add the only/default plot 
        	columnChart.addPlot("default", {
            	type: "Columns",
           	 	markers: true,
            	gap: 5
        	});     
        	// Create the tooltip
            var tip = new dojox.charting.action2d.Tooltip(columnChart,"default");
            new dojox.charting.action2d.Highlight(columnChart,"default");
            
            if(criteriaSel == "Sold_Seats") 
            	fillCol_Seats(columnChart, eventSel);
            else
            	fillCol_Sale(columnChart, eventSel);
            	
		}
		
		function createPieChart(eventSel, criteriaSel) {
           	
			var pieChart = new dojox.charting.Chart2D("pieChart");
			//set the theme
			pieChart.setTheme(dojox.charting.themes.MiamiNice);
	
			pieChart.addPlot("default", {
	        	type: "Pie",
	        	radius: 200,
	        	fontColor: "black",
	        	labelOffset: "-20"
			});
			//slice animation!
			new dojox.charting.action2d.MoveSlice(pieChart,"default");
			//tooltips!
			new dojox.charting.action2d.Tooltip(pieChart,"default");
			if(criteriaSel == "Sold_Seats") 
				fillPie_Seats(pieChart, eventSel);
			else
				fillPie_Sale(pieChart, eventSel);
		}
		
		function updateGraph() {
           	var eventRef = dojo.byId("event");
           	
           	var criteriaRef = dojo.byId("criteria");
           	
           	var eventStr = eventRef.value;
           	var criteriaStr = criteriaRef.value;
           	var chartStr = "";
           	
           	if(criteriaStr == "Sold_Seats")
           		chartStr = "the total sold seats";
           	else
           		chartStr = "the total sold amount";
           	
           	//refresh the container which contain the charts
           	var labelTag1 = "<div id=\"columnLabel\" style=\"background-color:gray;width:1000px;height:20px; text-align:center;\"><label><b>Column chart for " + chartStr + "</b></label></div>";
           	var labelTag2 = "<div id=\"pieLabel\" style=\"background-color:gray;width:1000px;height:20px; text-align:center;\"><label><b>Pie chart for " + chartStr + "</b></label></div>";
			var tag1 = "<div id=\"columnChart1\" style=\"width: 1000px; height: 250px;\"></div>";
			var tag2 = "<div id=\"pieChart\" style=\"height: 550px; width: 1000px;\"></div>";
			document.getElementById("container").innerHTML = labelTag1 + tag1 + labelTag2 + tag2;
			//document.getElementById("container").innerHTML = tag1 + tag2;

			createColumnChart(eventStr, criteriaStr);
			createPieChart(eventStr, criteriaStr);
		}
	</script>
</head>
<body class="claro">

 <div id="content">
<!-- Blue Menu -->
		<div id="menu_wrapper" class="blue" >
	 	<div class="left"></div>
			<ul id="menu" >
				<li><a href="/msgSp12/index.html">Upload File</a></li>
				<li><a href="/msgSp12/eGrid.html">EVENT Data</a></li>
				<li><a href="/msgSp12/tGrid.html">TICKET DATA</a></li>
				<li><a href="/msgSp12/fGrid.html">Forecast</a></li>
				<li><a href="/msgSp12/sGrid.html">Season Data</a></li>
				<li><a href="/msgSp12/pGrid.html">Price Data</a></li>
				<li><a href="/msgSp12/tgGrid.html">Ticket Group</a></li>
				<li class="active"><a href="/msgSp12/GraphDojo.html">Stats & Graphs</a></li>
			</ul>
		</div>
		
		<div id="chartContainer">
		<div style="background-color:white" class="blue">
			<label for="Events">Events:</label>
			<select id="event" data-dojo-type="dijit.form.Select" onchange="updateGraph()"></select>
			<label for="Criteria">Showing Criteria:</label>
			<select id="criteria" data-dojo-type="dijit.form.Select" onchange="updateGraph()"></select>
		</div>
		<hr style="background-color:white">
		
		<div id="container">
			<div id="columnChart1" style="height: 150px;"></div>
			<div id="pieChart" style="height: 150px"></div>
		</div>
		</div>
		<div id="legend"></div>
		
		

		<script type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
			djConfig="parseOnLoad:true">
			//Dojo configuration for charting
			dojoConfig = {
	       	 	parseOnLoad: true, //enables declarative chart creation
	        	gfxRenderer: "svg,silverlight,vml" // svg is first priority
	    	};
		</script>

	<script type="text/javascript">
		//import essential libraries for the Dojo charting
		dojo.require("dojox.charting.widget.Legend");
      	dojo.require("dijit.form.Select");
		dojo.require("dojox.charting.widget.Chart2D");
		dojo.require("dojox.charting.DataChart");
		dojo.require("dojox.charting.themes.MiamiNice");
		dojo.require("dojox.charting.action2d.Tooltip");
		dojo.require("dojox.charting.action2d.Magnify");
	</script>

	<script type="text/javascript">
		//load the utility page for using the utilities functions
		var utilityScript=document.createElement('script');
		utilityScript.src = "Utilities.js";
		document.body.appendChild(utilityScript);
	</script>

	<script type="text/javascript">
		//function will be called when page loaded
		dojo.addOnLoad(function(){					
            var jsonData = getJSONData("http://localhost/msgSp12/ActionController", "ticket");
            jsonData.then(function(res) {
            	var events = [];
     			var yAxis = [];
    			createComboItems(res, events, yAxis);
    			
    			//var ref_event = dijit.byId("event");
    			var ref_event = dojo.byId("event");
    			addComboItems(ref_event, events);
    			
    			var ref_criteria = dojo.byId("criteria");
    			addComboItems(ref_criteria, yAxis);
    			
    			updateGraph();
    			
            });
		});
	</script>
	</div>
	
	
	
</body>
</html>